<template>
    <div class="bank">
      <div class="bank_top">
        <div class="bank_inline">
          <span class="bank_search"
            ><el-input
              v-model="repositoryList.title"
              placeholder="搜索题库名称"
              @input="change"
            ></el-input
          ></span>
        </div>
        <span class="bank_btn"
          ><el-button
            icon="el-icon-plus"
            type="primary"
            size="small"
            @click="dialogVisible = true"
            >添加</el-button
          ></span
        >
        <div class="bank_selet" v-show="this.multipleSelection.length != 0">
          <span>
            <el-select
              v-model="value"
              :placeholder="cipplaceholder"
              @change="del"
            >
              <el-option key="删除" label="删除" value="删除">
              </el-option> </el-select
          ></span>
        </div>
      </div>
      <div class="bank_cent">
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          ref="multipleTable"
          :header-cell-style="{ background: '#F0F0F0' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column align="left"  prop="title" label="题库名称" >
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalRadio"
            label="单选题数量"
            
          >
          </el-table-column>
          <!-- <el-table-column align="center" prop="totalMulti" label="多选题数量">
          </el-table-column>
          <el-table-column align="center" prop="totalJudge" label="判断题数量">
          </el-table-column> -->
          <el-table-column align="center" prop="createTime" label="创建时间">
          </el-table-column>
        </el-table>
        <div class="pagina">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="repositoryList.currentPage"
            :page-sizes="[10, 20, 30, 10]"
            :page-size="repositoryList.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <el-dialog
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="题库名称" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="题库备注">
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >保存</el-button
            >
            <el-button @click="resetForm('ruleForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import {
    repositoryList,
    repositorySave,
    repositoryDelete,
    repositoryDetail,
  } from "@/api/bank";
  import { getYearMateTime } from "@/utils/time.js";
  import { debounceop } from "@/utils/filter";
  import cache from '@/plugins/cache';
  export default {
    data() {
      return {
        input: "",
        dialogVisible: false,
        total: 0,
        ruleForm: {
          title: "",
          remark: "",
          createTime: "",
          resourceId: this.$store.state.companyId,
          code: "",
        },
        rules: {
          title: [
            { required: true, message: "题库名称不能为空", trigger: "blur" },
          ],
        },
        tableData: [],
        multipleSelection: [],
        value: "",
        repositoryList: {
          pageSize: 10,
          currentPage: 1,
        //   resourceIds: [],
        //   title: "", 
        },
      };
    },
    computed: {
      cipplaceholder() {
        return this.multipleSelection.length
          ? `已选${this.multipleSelection.length}项`
          : "111";
      },
    },
    created() {
   
      this.getrepositoryList();
    },
    methods: {
      change() {
        debounceop(this.getrepositoryList(), 1000);
      },
      handleSizeChange(value) {
        this.repositoryList.pageSize = value;
        this.repositoryList.currentPage = 1;
        this.getrepositoryList();
      },
      handleClose() {
        this.dialogVisible = false;
      },
      handleCurrentChange(val) {
        this.repositoryList.currentPage = val;
  
        this.getrepositoryList();
      },
      getrepositoryList() {
        repositoryList(this.repositoryList).then((res) => {
          if (res.success) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message({
              message: "获取失败",
              type: "warning",
            });
          }
        });
      },
      setTimeDateFmt(s) {
        return s < 10 ? "0" + s : s;
      },
      createordernum() {
        const now = new Date();
        let month = now.getMonth() + 1;
        let day = now.getDate();
        let hour = now.getHours();
        let minutes = now.getMinutes();
        let seconds = now.getSeconds();
        month = this.setTimeDateFmt(month);
        day = this.setTimeDateFmt(day);
        hour = this.setTimeDateFmt(hour);
        minutes = this.setTimeDateFmt(minutes);
        seconds = this.setTimeDateFmt(seconds);
        let orderCode =
          now.getFullYear().toString() +
          month.toString() +
          day +
          hour +
          minutes +
          seconds +
          Math.round(Math.random() * 1000000).toString();
        return orderCode;
        //基于年月日时分秒+随机数生成订单编号
      },
  
      del(e) {
        this.value = "";
        this.$confirm("确实要删除吗??", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let ids = [];
            this.multipleSelection.forEach((item) => {
              ids.push(item.id);
            });
            repositoryDelete({ ids }).then((res) => {
              console.log(res);
              if (res.success) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getrepositoryList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      submitForm(formName) {
        let data = new Date().valueOf();
        this.ruleForm.createTime = getYearMateTime(data);
        this.ruleForm.code = this.createordernum();
        this.$refs[formName].validate((valid) => {
          if (valid) {
            repositorySave(this.ruleForm).then((res) => {
              if (res.success) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.getrepositoryList();
                for (const key in this.ruleForm) {
                  if (Object.hasOwnProperty.call(this.ruleForm, key)) {
                    this.ruleForm[key] = "";
                  }
                }
                this.dialogVisible = false;
              } else {
                this.$message({
                  message: "添加失败",
                  type: "warning",
                });
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.dialogVisible = false;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .bank {
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 10px 10px;
    .bank_top {
      width: 100%;
      .bank_inline {
        width: 100%;
        .bank_search {
          width: 200px;
          display: inline-block;
          margin-bottom: 10px;
        }
      }
    }
    .bank_selet {
      span {
        width: 130px;
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
    .bank_cent {
      width: 100%;
      margin-top: 10px;
      .pagina {
        margin-top: 50px;
      }
    }
  }
  </style>
  